<template>
  <div>
<van-nav-bar class='title'  title="账号登录"   left-arrow   @click-left="$router.back()"/>
<van-form @submit="onSubmit">
  <van-field
  class="van-field"
    v-model="username"
    name="username"
    placeholder="请输入账号"
    :rules="[{ required: true, message: '请填写账号' },
      { pattern: /^\w{6,}$/, message: '用户名至少包含6个字符'}
    ]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '请填写密码' },
    {pattern:/^\w{6,}$/,message: '密码至少为6个字符串'}
    ]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" id='login' @click="loginFn">登录</van-button>
  </div>
</van-form>

    <router-link class="link" to="/register">还没有账号,去注册~</router-link>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'HaokeLogin',

  data () {
    return {
      username: '',
      password: ''
    }
  },

  created () {

  },

  methods: {
    async  loginFn () {
      const res = await request({
        url: 'user/login',
        method: 'POST',
        data: {
          username: 'hzhmqd',
          password: '123456'
        }
      })
      console.log(res)
      // console.log(res.body.token)
      localStorage.setItem('token', res.body.token)
      this.$toast.success('登录成功')
      this.$router.push('/home/my')
    }

  }
}
</script>

<style  lang="less" scoped>
.link{
  color: #666666;
  font-size: 12px;
  display: block;
  text-align: center;
  margin: 0 auto;
}
#login{
  background-color: #56b27b;
}
.title{
  background-color:#56b27b ;

}
/deep/ .van-nav-bar__title{
  color: #fff;
}
/deep/ .van-nav-bar__left .van-icon{
  color: #fff;
}

.van-cell{
  height: 80px;
  font-size: 17px;
  border-bottom: 1px solid #DDDDDD;
}
.van-field{
  padding-top: 28px;
  .van-field__body{
  height: 60px;
  }
}

</style>
